import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Alert
} from "react-native";

export default class ReactNativeStart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: "enter a string"
    };

    this.onInputChange = this.onInputChange.bind(this);
  }

  render() {

    return (

      <View 
        style = { styles.view }
      >
        
        
        <TextInput
          underlineColorAndroid = "transparent"
          style = { styles.input }
          value = { this.state.text }
          onChangeText = { this.onInputChange }
        />
      </View>
    );
  }

  // 输入框内容改变
  onInputChange(text) {

    // 弹出内容
    Alert.alert(
      "hello", 
      text,
      [
        { text: "world" }
      ] 
    );

    this.setState({ text });
  }
}

const styles = StyleSheet.create({
  view: {
    marginTop: 50
  },
  input: {
    borderWidth: 1,
    borderColor: "gray",
    height: 30
  }
})